<template>
  <div>
    <div>这是左边的bar</div>
    <div>
      <ul>
        <li v-for="(item, index) in navData" :key="index" @click="jumpRoute(item)">{{item.label}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navData: [
        {
          label: '路由部分',
          name: 'right-side-one',
          route: {path: '/'}
        },
        {
          label: 'echarts部分',
          name: 'right-side-two',
          route: {path: '/right-side-two'}
        },
        {
          label: 'css3新特性和流程部分',
          name: 'right-side-three',
          route: {path: '/right-side-three'}
        },
        {
          label: 'html5新特性',
          name: 'right-side-four',
          route: {path: '/right-side-four'}
        },
        {
          label: 'vue混合',
          name: 'right-side-five',
          route: {path: '/right-side-five'}
        }
      ]
    }
  },
  methods: {
    jumpRoute (v) {
      // 传参方式1,name
      // this.$router.push({name: v.name, params: v})
      // 传参方式2
      this.$router.push({...v.route, query: {label: v.label}})
    }
  }
}
</script>

